<template>
    <div class="content">
        <el-table :data="tableData" style="width: 100%;" max-height="600"
                  row-key="id" border highlight-current-row
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  >
            <template v-for="(itemHead, index) in tableHead">
                <el-table-column :key="index" :label="itemHead.label" :property="itemHead.prop"
                                 :align="index>0?'center':'left'">
                    <template slot-scope="scope">
                        <span>{{ scope.row[scope.column.property] }}</span>
                    </template>
                </el-table-column>
            </template>

        </el-table>
    </div>
</template>


<script>

    export default {
        name: 'table-funnel',
        props: {
            resData: {
                type: Object,
                default: null
            },
            /* 是否按照总体查看*/
            byRead:{
                type: Boolean,
                default: false
            },
            /* 是否按照和合计查看*/
            byDate:{
                type: Boolean,
                default: true
            }
        },

        data() {
            return {
                tableHead: [],
                tableData: [],

                /*是否按照某种或多种类型进行分组*/
                isByValues: true,
                /*是否按照走*/
                is:false
            }
        },

        created() {
            let t = this;
            t.tableHead = [];
            t.tableData = [];

            t.initTabHead();
            t.$watch('resData', () => {
                t.tableHead = [];
                t.tableData = [];

                t.initTabHead();
            });
        },

        methods: {
            /* 判断是否是数组 */
            isArray: (a) => {
                return (Object.prototype.toString.call(a) === '[object Array]');
            },


            initTabHead() {
                if (!this.resData){
                    return
                }
                let t = this;
                t.tableHead.push({prop: 'title', label: ''});
                t.tableHead.push({prop: 'medianTime', label: '间隔时间中位数'});
                t.tableHead.push({prop: 'maxTime', label: '最大值'});
                t.tableHead.push({prop: 'minTime', label: '最小值'});
                t.tableHead.push({prop: 'quartile3', label: '上四分位'});
                t.tableHead.push({prop: 'quartile1', label: '下四分位'});
                t.tableHead.push({prop: 'avgTime', label: '人均转化时间'});
                t.tableHead.push({prop: 'people', label: '转化用户数'});
                this.initTabData();
            },
            /* 初始化表身数据 不含属性值(选择总体)*/
            initTabData() {
                let t = this;
                //主行数
               let items = t.getRow();

                t.tableData = items;
            },
            getRow() {
                let report = this.resData
                let items = []
                for (let i = 0; i < report.byValues.length; i++) {
                    let item = this.getTabTem()
                    for (let j = 0; j < 1; j++) {
                        item['title'] = report.byValues[i]==='$ALL'?'总体':report.byValues[i];
                        item['maxTime'] = this.formatSeconds(report.maxTime[i][j]); //最大值
                        item['quartile3'] = this.formatSeconds(report.quartile3[i][j]); //上四分位
                        item['medianTime'] = this.formatSeconds(report.medianTime[i][j]); //中位
                        item['quartile1'] = this.formatSeconds(report.quartile1[i][j]); //下四分位
                        item['minTime'] = this.formatSeconds(report.minTime[i][j]); //最小数值
                        item['avgTime'] = this.formatSeconds(report.avgTime[i][j]);//平均值
                        item['people'] = report.people[i][j] + '人';//平均值
                    }

                    if (this.byDate!==true){
                        item.children=[]
                        for (let j = 1; j < report.dateList.length; j++) {
                            let itemChildren = this.getTabTem()
                            itemChildren['title'] = report.dateList[j];
                            itemChildren['maxTime'] = this.formatSeconds(report.maxTime[i][j]); //最大值
                            itemChildren['quartile3'] = this.formatSeconds(report.quartile3[i][j]); //上四分位
                            itemChildren['medianTime'] = this.formatSeconds(report.medianTime[i][j]); //中位
                            itemChildren['quartile1'] = this.formatSeconds(report.quartile1[i][j]); //下四分位
                            itemChildren['minTime'] = this.formatSeconds(report.minTime[i][j]); //最小数值
                            itemChildren['avgTime'] = this.formatSeconds(report.avgTime[i][j]);//平均值
                            itemChildren['people'] = report.people[i][j] + '人';//平均值
                            item.children.push(itemChildren)
                        }
                    }
                    items.push(item)
                }
                return items
            },
            formatSeconds(value) {
                var theTime = parseInt(value);// 秒
                var middle = 0;// 分
                var hour = 0;// 小时

                if (theTime > 60) {
                    middle = parseInt(theTime / 60);
                    theTime = parseInt(theTime % 60);
                    if (middle > 60) {
                        hour = parseInt(middle / 60);
                        middle = parseInt(middle % 60);
                    }
                }
                var result = "" + parseInt(theTime) + "秒";
                if (middle > 0) {
                    result = "" + parseInt(middle) + "分" + result;
                }
                if (hour > 0) {
                    result = "" + parseInt(hour) + "小时" + result;
                }
                return result;
            },
            /* 返回数组字符串 例：['a', null] => 'a, null' */
            getByValuesListStr(arr) {
                let str = '';

                for (let i = 0; i < arr.length; i++) {
                    let val = arr[i];
                    str = str + val + ((i === arr.length - 1) ? '' : ', ');
                }

                return str;
            },
            /* 返回表格行 选择总数时 */
            getRowDataByTotal(resData, overview, parentIndex) {
                let t = this;
                if (parentIndex === undefined) {
                    resData['byValue'] = '总体';
                    resData['totalPeople'] = t.retainedReportResData.rows[0].totalPeople + "人";
                    for (let i = 0; i < overview.length; i++) {
                        resData['' + i] = overview[i].percent + "%";
                    }
                } else {
                    for (let i = 0; i < overview.length; i++) {
                        if (overview[i].values[0] !== undefined) {
                            resData['' + i] = [overview[i].people + '人',overview[i].values[0], overview[i].percent + "%"];
                        }else{
                            resData['' + i] = [overview[i].people + '人',overview[i].percent + "%"];
                        }

                    }
                    return resData;
                }

            },

            /* 返回表身数据模板 */
            getTabTem(b) {
                let tabTem = {};
                for (let i = 0; i < this.tableHead.length; i++) {
                    let item = this.tableHead[i];
                    // 标识唯一 id，方便折叠展开，和点击高亮行
                    tabTem['id'] = Number(Math.random().toString().substr(3, 10) + Date.now()).toString(36);
                    if (item.prop) {
                        tabTem[item.prop] = '';
                    }
                    if (b) {
                        tabTem['children'] = [];
                    }
                }
                return tabTem;
            },

        },
        watch: {}
    }
</script>

<style>
    .popoverClass {
        padding: 0px !important;
        background: #000000;
    }
    .popper__arrow::after{
        border-top-color: #000000 !important;
    }
</style>
<style scoped lang="scss">

    /deep/.el-table tbody tr:hover>td {
        background-color:#ffffff !important
    }

    /deep/.el-table__body tr.current-row>td{
        background-color: #ffffff !important;
    }

    .item-value{
        text-align: center;
        height: 80px;
        .item-value-detail{
            height: 14px;
            line-height: 14px;
            font-size: 6px;
            margin-bottom: 2px;
        }
        .item-value-head{
            margin-bottom: 3px;
        }
    }
    .item-value-center{
        line-height: 80px;
    }
    ::v-deep .el-table tbody td {
        padding: 5px 0;
    }

    .fix-height{
        height: 10px;
    }
</style>
